<template>
    <van-popup v-if="isShow" v-model="isShow" closeable round position="bottom" style="">
        <!-- 套一个小的略小的div 适配滚动条和外圈的圆角 -->
        <div class="popup-container">

            <van-cell-group>
                <van-field v-model="item.name" label="重命名" />
                <van-field v-model="item.remark" label="备注" placeholder="输入备注" />
            </van-cell-group>

            <van-row>
                <van-col class="perview-title">收藏预览</van-col>
            </van-row>

            <van-row class="margin-top">
                <van-col span="3" offset="2" class="calc-result-list-location border-left">I</van-col>
                <van-col span="3" class="calc-result-list-location">II</van-col>
                <van-col span="3" class="calc-result-list-location">III</van-col>
                <van-col span="3" class="calc-result-list-location">IV</van-col>
                <van-col span="3" class="calc-result-list-location">V</van-col>
                <van-col span="3" class="calc-result-list-location">VI</van-col>
            </van-row>

            <van-row>
                <van-col v-for="(engr, index) in item.list" class="calc-result-list-imgcol" span="3"
                    :offset="index == 0 ? 2 : 0">
                    <van-image :height="50" :width="50" :src="engr.icon" />
                </van-col>
            </van-row>

            <!-- 词条统计 -->
            <van-row class="affix-btn-row margin-top">
                <!-- <van-col span="22" offset="1"> {{ calcResult.count|affixCount }}</van-col> -->
                <template v-if="affixList" v-for="key in Object.keys(item.count)">
                    <van-button class="affix-btn" plain :type="$options.filters.getButtonTypeByAffix(key)">
                        {{ key }} x{{ item.count[key] }}
                    </van-button>
                </template>
            </van-row>

            <!-- 套装效果 -->
            <van-divider>套装</van-divider>
            <van-row>
                <van-col class="groupEffect-text" span='22' offset='1' v-for="text in getGropEffect()">
                    {{ text }}
                    <van-divider />
                </van-col>
            </van-row>

            <van-tabbar>
                <van-button class="margin-auto" span="3" type="danger" icon="like-o" @click="onCommit">收藏</van-button>
            </van-tabbar>
        </div>
    </van-popup>

</template>

<script>
import { CalcServer, SearchServer } from '../../server/servers';
import { Toast, Notify } from 'vant';
const locWrods = ['I', 'II', 'III', 'IV', 'V', 'VI'];
const btnTypeAffix = ['', 'danger', 'danger', 'info', 'warning'];
let vm;

export default {
    name: 'Favorited',
    props: {
        affixList: Array,
        affixOptions: Object,
        isFavoritedShow: Boolean,
        favoritedCalcResult: Object,
    },

    created() {
        vm = this;
    },
    filters: {
        //用vm代替this

        locationWord(data) {
            return locWrods[data]
        },

        affixCount(data) {
            let text = "";
            Object.keys(data).forEach(k => {
                text += k + "x" + data[k] + "  ";
            });
            return text;
        },

        getButtonTypeByAffix(data) {
            let type = 0;
            vm.affixList.some(e => {
                if (e.name == data) {
                    type = e.type;
                    return true;
                }
            })
            return btnTypeAffix[type];
        }
    },

    computed: {
        isShow: {
            get() {
                return this.isFavoritedShow;
            },
            set(val) {
                if (!val) {
                    this.$emit("close");
                }
            }
        },
        item: {
            get() {
                return this.favoritedCalcResult
            },
            set(val) {
                this.favoritedCalcResult = val;
            }
        },

        store_favorited_list() {
            return this.$store.state.favorited_list;
        }
    },
    data() {
        return {

        }
    },

    methods: {
        getGropEffect() {
            let object = {};
            this.item.list.forEach(e => {
                object[e.effect] = 1; //利用key可以覆盖的原理
            });
            return Object.keys(object);
        },

        onCommit() {
            let result = CalcServer.addFavorited(this.item);

            if (result.code == 0) {
                Notify({ type: 'success', message: "\n收藏成功", duration: 2000 });
                this.$emit("close");
                this.$store.commit("pushFavoritedList",this.item);

            } else {
                Notify({ type: 'warning', message: "\n收藏失败", duration: 2000 });
                console.log('Favorited.vue', 'onCommit', '添加失败', result);
            }
        },

        onCancel() {
            this.$emit("close");
        }
    }
}
</script>


<style scoped>
.van-popup {
    height: 650px;
    overflow-y: hidden;
}

.popup-container {
    margin-top: 10%;
    width: 99%;
}

* {
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.perview-title {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none;
    box-sizing: border-box;
    width: 6.2em;
    margin: 10px 16px;
    color: #646566;
    text-align: left;
    word-wrap: break-word;
    font-size: 14px;
    color: #323233;
}

.calc-result-list-location {
    text-align: center;
    border-top: 1px solid rgb(235, 237, 240);
    border-right: 1px solid rgb(235, 237, 240);
    border-bottom: 1px solid rgb(235, 237, 240);
}

.calc-result-list-imgcol {
    text-align: left;
    padding-left: 5px;
    border-right: 1px solid rgb(235, 237, 240);
    border-bottom: 1px solid rgb(235, 237, 240);
}

.calc-result-list-imgcol:first-child {
    border-left: 1px solid rgb(235, 237, 240);
}



.calc-result-list-engrcol {
    text-align: center;
    border-right: 1px solid rgb(235, 237, 240);
    border-left: 1px solid rgb(235, 237, 240);
    border-bottom: 1px solid rgb(235, 237, 240);
}

.affix-btn-row {
    padding: 0 5%;
}

.affix-btn {
    height: 30px;
    margin-left: 5px;
    margin-bottom: 5px;
}

.groupEffect-text {
    font-size: 14px;
}
</style>